<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/29
  Time: 12:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery图片配文字动画切换</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/stuIndexContent/css/YlSidler.css">

    <script src="${pageContext.request.contextPath}/static/stuIndexContent/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/stuIndexContent/js/jquery.Yl.Slide.min.js"></script>
    <script>
        $(function(){
            $('.Yl-container').YlSlide({
                wrapper:'.Yl-wrapper',
                slideClass:'.Yl-slide',
                stylePrefix:'.Yl-',
                slideLength:3,
                pages:true,
                pagination:'.Yl-pagination',
                pagingSelect:'.Yl-pagination-bullet-active',
                autoplay:8000,
                imgTemplate:{
                    0:['<div class="Yl-img0"></div>'],
                    1:['<div class="Yl-img1"></div>'],
                    2:['<div class="Yl-img2"></div>']
                },
                fontTemplate:{
                    0:['<div class="Yl-font0">李白</div>','<div class="Yl-font1">大鹏一日同风起,扶摇直上九万里</div>','<div class="Yl-font2">励志人生</div>'],
                    1:['<div class="Yl-font0">《礼记》</div>','<div class="Yl-font1">博学之，审问之，慎思之，明辨之，笃行之。</div>','<div class="Yl-font2">励志人生</div>'],
                    2:['<div class="Yl-font0">宋玉</div>','<div class="Yl-font1">其曲弥高，其和弥寡。</div>','<div class="Yl-font2">励志人生</div>']
                },
                fontAnimationMode:{
                    0:['fadeInUp','fadeInUp','slideInLeft'],
                    1:['fadeInUp','fadeInUp','slideInLeft'],
                    2:['fadeInUp','fadeInUp','slideInLeft']
                },
                customTemplate:{
                    0:['<div class="Yl-Button"><a href="http://www.lizhi135.com/">查看详情</a></div>'],
                    1:['<div class="Yl-Button"><a href="http://www.zhlzw.com/">查看详情</a></div>'],
                    2:['<div class="Yl-Button"><a href="https://www.cy1990.com/">查看详情</a></div>']
                },
                callback:function(e){
                    //整个dom加载完成后的回调函数、切换动画前的回调
                },
                before: function(e) {
                    //页面切换前的回调函数
                },
                after: function(e) {
                    //页面切换完成后的回调函数

                }
            });
        });
    </script>

</head>
<body>

<div class="sun_banner">
    <div class="Yl-container"></div>
</div>


</body>
</html>
